<!--
 * @Author: GKN
 * @Date: 2023-09-01 10:42:12
 * @LastEditTime: 2024-01-22 16:22:25
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\animatedly\listSearch.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="main mainPadding p-t" style="background: #fff;">
        <div class="max-w">
      <listView :breadcrumb_list="breadcrumb_list" :page ="page" @currentChange="currentChange">
          <template v-slot:content>
              <div class="MarT35">
                  <el-row :gutter="20" style="width: 100%;">
                    <div v-if="list.length==0||!list" class="withFull flex flex-j-c">
                        <el-empty :image-size="150" description="暂无数据"  />
                    </div>
                      <el-col v-for="item in list" :key="item" :span="item.thumb?24:12">
                          <div class="item cursor-p shadow-1 padding-20" @click="detail(item)">
                              <el-row :gutter="20">
                                  <el-col :span="8" v-if="item.thumb">
                                      <div class="img shadow-1">
                                          <img :src="proxy.$api.prefix_img+item.thumb" alt="" class="img_cover">
                                      </div>
                                  </el-col>
                                  <el-col :span="!item.thumb?24:16">
                                      <div class="flex itemR">
                                          <div :style="!item.thumb?'height:204px;':''">
                                              <div class="title omit-2">{{ item.name }}</div>
                                              <div class="desc MarT omit-4">{{ item.blurb }}</div>
                                          </div>
                                          <div class="flex itemR-b MarT12"> 
                                              <div class="look"><img src="@/assets/img/anim/i7.png" alt="" style="margin-right:10px;">{{ item.look||'0'}}</div>
                                              <div class="time">{{ item.startTm }}</div>
                                          </div>
                                      </div>
                                  </el-col>
                              </el-row>
                          </div>
                      </el-col>
                  </el-row>
                  <div class="pager" v-if="isPage">
                    <myPage @nextbtn="nextbtn" @prevbtn="prevbtn" />
                </div>
              </div>
          </template>
      </listView>
        </div>
    </div>
  </template>
  
  <script setup>
  import listView from '../components/list.vue';
  import { ref,reactive, onMounted,getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  import CryptoJS from 'crypto-js';
  import { useRoute, useRouter } from "vue-router";
  const Router = useRouter();
      // 导航参数
      const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob)
      // 面包屑
      const breadcrumb_list = [{name:query.first_title,},{name:'搜索结果'}]
      const page = ref({
          total:10
      })
      const currentChange = (e)=>{
          // ElMessage('第'+e+'条')
      }
      const list = ref([])
      const pageinfo = ref({
        nextTag:0,
        prevTag:0
    })
    const isPage = ref(true)
      const getList =()=>{
          proxy.$http.request(proxy.$api.searchList+'?nextTag='+pageinfo.value.nextTag+'&pageSize=30&prevTag='+pageinfo.value.prevTag+'&name='+query.form.name+'&year='+query.form.year+'&vt='+query.form.vt+'&ty='+query.ty,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    res.data.data.list.map((item)=>{
                        list.value.push(item)
                    })
                }
                pageinfo.value={
                    nextTag:res.data.data.nextTag,
                    prevTag:res.data.data.prevTag
                }
                if(res.data.data.nextTag < 0||res.data.data.nextTag==0){
                    isPage.value = false
                }
            }
        })
      }
    getList()
    const nextbtn=()=>{
        getList()
    }
        const prevbtn=()=>{
            getList()
    }
      const detail = (item)=>{
        const routeUrl = Router.resolve({
              path:'/animatedly/info',
              query:{
                  ob:proxy.$comJs.encry({
                      title:query.title,
                      id:item.newsId,
                      path:'/animatedly/list',
                      first_title:query.first_title,
                  })
              }
          });
          window.open(routeUrl.href, "_blank");
      }
  </script>
  
  <style lang='less' scoped>
  .item{
      height: 260px;
      margin-bottom:30px;
      .img{
          border-radius: 6px;
          overflow: hidden;
          height: 224px;
      }
      .title{
          font-size: 27px;
          color: #333;
          text-align: left;
      }
      .desc{
          font-size: 14px;
          color: #9e9e9e; 
          text-align: left;
          line-height: 22px;
      }
      .look{
          display: flex;
          align-items: center;
          font-size: 11px;
          color: #aeaeae;
          img{
              width: 20px;
              height: 12px;
          }
      }
      .time{
          margin-left: 50px;
          font-size: 11px;
          color: #aeaeae;
      }
      .itemR{
          height: 100%;
          flex-direction: column;
          justify-content: space-between;
          .itemR-b{
              display: flex;
              justify-content: flex-end;
          }
      }
  }
  </style>
  